<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.15.13/lib/theme-chalk/index.min.css"/>
    <script src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/element-ui@2.15.13/lib/index.min.js"></script>
    <script th:src="@{/static/main.js}"></script>

</head>
<body>

<el-container id="app">
    <el-main>
        <!--    标题    -->
        <div v-if="cartVoList.length>0" style="margin-top: 0px;text-align: center;font-size: 30px"><h1>结算</h1></div>
        <div style="text-align: center;margin-bottom: 20px;">
            <span style="font-size: 25px;">地址选择</span>
            <template>
                <el-select v-model="defaultAddressId" placeholder="请选择" style="width: 500px;">
                    <el-option
                            v-for="address in addressList"
                            :key="address.id"
                            :label="address.receiver + ' ' + address.tel + '  ' + address.province +'  '+ address.city + '  ' + address.area + '  '+ address.detailAddress + '  ' + address.emailCode"
                            :value="address.id">
                    </el-option>
                </el-select>
            </template>
            <el-button type="primary" icon="el-icon-add-location" style="font-size: 13px" @click="dialogFormVisible = true;">新增地址</el-button>
        </div>

        <el-dialog title="新增地址" :visible.sync="dialogFormVisible">


            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">

                <el-form-item label="省" prop="provinceId">
                    <el-select style="width:100%;" v-model="ruleForm.provinceId" placeholder="请选择省份"
                               @change="refreshCity">
                        <el-option :key="province.id" v-for="province in ruleForm.provinceList" :label="province.name"
                                   :value="province.id"></el-option>
                    </el-select>
                </el-form-item>


                <el-form-item label="市" prop="cityId">
                    <el-select style="width:100%;" v-model="ruleForm.cityId" placeholder="请选择城市"
                               @change="refreshArea">
                        <el-option v-for="city in ruleForm.cityList" :label="city.name" :value="city.id"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="区" prop="areaId">
                    <el-select style="width:100%;" v-model="ruleForm.areaId" placeholder="请选择地区">
                        <el-option v-for="area in ruleForm.areaList" :label="area.name" :value="area.id"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="详细地址" prop="detailAddress">
                    <el-input v-model="ruleForm.detailAddress" placeholder="请输入详细地址"></el-input>
                </el-form-item>

                <el-form-item label="手机号" prop="tel">
                    <el-input v-model="ruleForm.tel" placeholder="请输入手机号"></el-input>
                </el-form-item>
                <el-form-item label="收件人姓名" prop="receiver">
                    <el-input v-model="ruleForm.receiver" placeholder="请输入收件人姓名"></el-input>
                </el-form-item>
                <el-form-item label="邮编" prop="emailCode">
                    <el-input v-model="ruleForm.emailCode" placeholder="请输入邮编"></el-input>
                </el-form-item>


                <el-form-item label="是否默认" prop="isDefault">
                    <el-switch v-model="ruleForm.isDefault"></el-switch>
                </el-form-item>


                <el-form-item>
                    <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
                    <el-button @click="clearAddForm">重置</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>

        <el-row>
            <el-col :span="20" :offset="2">

        <!--    表格    -->
        <div v-for="cartVo in cartVoList" style="margin-bottom:20px;border: 1px solid #458b74;box-shadow: 5px 5px 3px 0px #CCCCCC;border-radius: 5px">
            <!--店铺名+图-->
            <div class="row" style="background-color:#458b74">
                <img :src="cartVo.storeImg" style="width: 60px;height: 60px; border-radius: 50%"/>
                <span v-text="cartVo.storeName" style="font-size: 30px;color:#FF7F50;margin-left: 20px;"></span>
            </div>
            <!--商品信息-->
            <template style="text-align: center">
                <el-table
                        :header-cell-style="'text-align:center'"
                        :cell-style="'text-align:center'"
                        ref="multipleTable"
                        :data="cartVo.cartItemList"
                        tooltip-effect="dark"
                        style="width: 1100px;text-align: center">
                    <el-table-column
                            prop="productId"
                            label="编号"
                            min-width="15%">
                    </el-table-column>
                    <el-table-column
                            prop="productName"
                            label="商品"
                            min-width="20%">
                    </el-table-column>
                    <el-table-column
                            label="图片"
                            min-width="25%">
                        <template slot-scope="scope">
                            <img :src="scope.row.productImg"
                                 min-width="100" height="100"/>
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="productPrice"
                            label="单价"
                            min-width="15%">
                    </el-table-column>


                    <el-table-column
                            prop="buyCount"
                            label="数量"
                            min-width="10%">
                    </el-table-column>


                    <el-table-column
                            prop="sumPrice"
                            label="小计"
                            min-width="15%">
                    </el-table-column>
                </el-table>

            </template>
            <div>
                <span> 总价(元): {{cartVo.totalPrice}} </span>
            </div>
        </div>

            </el-col>
        </el-row>



        <el-row  v-if="cartVoList.length>0"
                :gutter="20"
                style="margin-top: 10px;position:fixed;bottom:0;width: 99%;background-color: white;padding: 3px;">
            <el-col :span="4" :offset="17">
                <div style="line-height: 40px;color: #FF7F50;">共{{productIds.length}}件，合计:¥{{totalPrice}}元</div>

            </el-col>
            <el-col :span="2">
                <el-button type="success" @click="submitOrder">提交</el-button>
            </el-col>
        </el-row>


    </el-main>
</el-container>

<script>


    console.log(".........myCart...........")

    let myCart = new Vue({

        el: "#app"
        ,
        data:

        //自定义校验
        // function (){
        // var validateProvince = (rule, value, callback) => {
        //     console.log(value);
        //     if (value !== '''') {
        //         callback(new Error('请选择省份'));
        //     }else{
        //         callback();
        //     }
        // };
        // return
            {

                cartVoList: [],
                totalPrice: '0.00',
                productIds: [[${productIds}]],
                dialogFormVisible: false,
                addressList: [],
                defaultAddressId: '',
                //表单
                ruleForm: {
                    provinceId: '',
                    cityId: '',
                    areaId: '',
                    provinceList: [],
                    cityList: [],
                    areaList: [],
                    detailAddress: '',
                    tel: '',
                    receiver: '',
                    emailCode: '',
                    isDefault: false,
                },
                rules: {
                    provinceId: [
                        //自定义 { type: "number",required:true, validator: validateProvince, trigger: 'change' }
                        {required: true, message: '请选择城市', trigger: 'change'}
                    ]
                    ,
                    cityId: [
                        {required: true, message: '请选择城市', trigger: 'change'}
                    ]
                    ,
                    areaId: [
                        {required: true, message: '请选择区域', trigger: 'change'}
                    ]
                    ,
                    detailAddress: [
                        {required: true, message: '请输入详细地址', trigger: 'blur'},
                        {max: 20, message: '长度在 20 个字符以内', trigger: 'blur'}
                    ],
                    tel: [
                        {required: true, message: '请输入电话号码', trigger: 'blur'}
                    ],
                    receiver: [
                        {required: true, message: '请输入收件人姓名', trigger: 'blur'}
                    ],
                    emailCode: [
                        {required: true, message: '请输入邮编', trigger: 'blur'}
                    ],
                    addressValue: [
                        {type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'blur'}
                    ]
                }

            }
        // }


        ,
        methods: {
            initCartItemList() {
                let _this = this;
                $.post("/cart/calPrice", {
                    productIds: this.productIds,
                }, function (data) {
                    _this.cartVoList = data.cartVoList;
                    _this.totalPrice = data.totalPrice;
                })
            }
            ,
            initAddressList() {
                //去后端获取当前用户的所有收货地址
                let _this = this;
                $.get("/address/all", function (data) {
                    console.log(data)
                    _this.addressList = data;

                    //确认默认地址的id
                    for (let address of data) {
                        if (address.isDefault == '1') {
                            _this.defaultAddressId = address.id;
                            break;
                        }
                    }
                })
            }
            ,
            initProvinceList() {  //省 / 直辖市
                let _this = this;

                $.get("/china/queryList?pid=0", function (data) {
                    console.log(data)

                    _this.ruleForm.provinceList = data;
                    console.log(_this.ruleForm.provinceList);
                    //市 区 选择项要置空
                    _this.ruleForm.cityList = [];
                    _this.ruleForm.cityId = '';
                    _this.ruleForm.areaList = [];
                    _this.ruleForm.areaId = '';
                })
            }
            ,
            refreshCity() {   //市  / 直辖市的区
                console.log(this.ruleForm.provinceId)
                let _this = this;

                $.get("/china/queryList?pid=" + this.ruleForm.provinceId, function (data) {
                    console.log(data)

                    _this.ruleForm.cityId = '';
                    _this.ruleForm.cityList = data;

                    //把县数据置空
                    _this.ruleForm.areaList = [];
                    _this.ruleForm.areaId = '';
                })
            }
            ,
            refreshArea() {   // 县 / -
                console.log(this.ruleForm.cityId)

                let _this = this;

                $.get("/china/queryList?pid=" + this.ruleForm.cityId, function (data) {
                    console.log(data)
                    _this.ruleForm.areaId = '';
                    _this.ruleForm.areaList = data;
                })
            }
            ,
            clearAddForm() {
                //打开新增地址表单时,清空表单数据
                this.ruleForm.provinceId = '';
                this.ruleForm.cityId = '';
                this.ruleForm.areaId = '';
                this.$refs['ruleForm'].resetFields();
            }
            ,
            submitOrder() {
                //提交订单:  要结算的商品的id    收货地址id   当前用户信息(后台直接获取)
                console.log(this.productIds)
                console.log(this.defaultAddressId)

                let params = {
                    productIds: this.productIds,
                    addressId: this.defaultAddressId
                }
                let _this = this;
                console.log(params)

                $.post("/order/createOrder", params, function (data) {
                    console.log(data)

                    if (data == "ok") {
                        //订单生成成功,前往我的订单页
                        console.log("订单生成成功")
                        location.href = "/userorder.html";

                    } else {
                        _this.$alert(data)
                    }
                })
            }
            ,
            saveAddress() {
                //搜集表单数据
                //省市区要id转name
                console.log("前");
                let provinceName = "";
                for (let item of this.ruleForm.provinceList) {
                    if (item.id == this.ruleForm.provinceId) {
                        provinceName = item.name;
                        break;
                    }
                }
                console.log("后");

                let cityName = "";
                for (let item of this.ruleForm.cityList) {
                    if (item.id == this.ruleForm.cityId) {
                        cityName = item.name;
                        break;
                    }
                }
                let areaName = "";
                for (let item of this.ruleForm.areaList) {
                    if (item.id == this.ruleForm.areaId) {
                        areaName = item.name;
                        break;
                    }
                }
                //是否more地址 要 布尔值转字符串
                let defaultFlag = this.ruleForm.isDefault ? 1 : 0;
                let params = {
                    province: provinceName,
                    city: cityName,
                    area: areaName,
                    detailAddress: this.ruleForm.detailAddress,
                    tel: this.ruleForm.tel,
                    receiver: this.ruleForm.receiver,
                    emailCode: this.ruleForm.emailCode,
                    isDefault: defaultFlag
                }
                console.log(params);

                let _this = this;
                //数据提交后端接口,新增地址
                $.post("/address/add", params, function (data) {
                    console.log(data)
                    //刷新可选地址
                    _this.initAddressList();
                    _this.$alert('添加成功');
                })
            }
            ,

            submitForm(formName) {
                let _this = this;
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        _this.saveAddress();
                        _this.dialogFormVisible = false;
                        _this.clearAddForm();
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },

        }
        ,
        created() {
            this.initAddressList();
            this.initCartItemList();
            this.initProvinceList();

        }


    });


</script>
</body>
</html>

